.container{
  // position: relative;
  height: 100vh;
  overflow: auto;
  padding: 0;
  background-color: #f4f4f4;
  width: 100vw;
  // 头部样式
  .nav{
    position: relative;
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .img{
      width: 78.7px;
      height: 100%;
      margin-left: 15.1px;
      image{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .text{
      font-family: 'PingFangSC-Regular';
      font-size: 13px;
      color: #9D9E9E;
      letter-spacing: 2.06px;
    }
    .navigation{
      width: 20px;
      height: 14px;
      margin-right: 15px;
      image{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  // 导航栏标题样式 337
  .navList{
    position:absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 674rpx;
    background-color: #fff;
    padding-top: 21px;
    margin: 0 auto;
    .item{
      font-family:' PingFangSC-Regular';
      font-size: 13px;
      color: #3D3D3D;
      letter-spacing: 0;
      text-align: center;
      margin-bottom: 21px;
    }
    .colour{
      color: #3683FF;
    }
  }
  // banner样式
  .banner{
    width: 100%;
    height: 422rpx;
    image{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  //关于我们
  .about{
    width: 100%;
    margin-top: 21px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    .we{
      width: fit-content;
      margin:0 auto 13px;
      .title{
        width: 71px;
        height: 22px;
        font-size: 16px;
        color: #3D3D3D;
        letter-spacing: 1.6px;
      }
      .line{
        width: 69.2px;
        height: 2px;
        margin: 2px auto;
        background-image: linear-gradient(-133deg,#C000FF 0,#00C7EF 100%);
      }
      .course{
        font-family: ArialMT;
        font-size: 12px;
        color: #9D9E9E;
        letter-spacing: 0;
        text-align: center;
      }
    }
    .desc{
      width: fit-content;
      margin:0 auto;
      image{
        display: block;
        width: 635.6rpx;
        height: 358rpx;
      }
      .text{
        width: 635.6rpx;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #6D6D6E;
        letter-spacing: 0;
        line-height: 20px;
        margin-top: 13px;
      }
    }
  }
  // 科目 (UI设计 / H5前端开发) 样式
  .subject{
    width: 100%;
    margin-top: 37px;
    .UI,.web{
      width: 100%;
      height: 300rpx;
      padding-top: 0.1px;
      margin-bottom: 15px;
      background-image: linear-gradient(-133deg, #FF769B 0%, #FFC29C 100%);
      .title{
        font-family: '.PingFang-SC-Semibold';
        font-size: 18px;
        color: #fff;
        letter-spacing: 1px;
        line-height: 25px;
        text-align: center;
        margin-top: 17px;
      }
      .content{
        width: 676rpx;
        font-family: 'PingFangSC-Regular';
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        margin: 6px auto 18px;
      }
      .info{
        width: 86px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 16px;
        margin: 0 auto;
      }
    }
    .web{
      background-image: linear-gradient(-135deg, #6BBBFF 0%, #B9A7FF 100%);
    }
  }
    .mask{
      width: 100%;
      height: 100vh;
      background:rgba(0,0,0,0.6);
      position: fixed ;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .box{
        position: relative;
        width: 287px;
        height: 225px;
        background-color: #fff;
        border-radius: 4px;
        .line{
          position: absolute;
          top: -16.8px;
          right: 18px;
          width: 2px;
          height: 16.8px;
          background-color: #fff;
        }
        image{
          position: absolute;
          top: -46px;
          right: 5px;
          display: block;
          width: 30px;
          height: 30px;
          background-color: #fff;
          border-radius: 50%;
        }
        .desc{
            width: fit-content;
            padding-top: 50px;
            margin: 0 auto;
            .title{
              font-family:'.PingFang-SC-Semibold';
              font-size: 18px;
              color: #FFFFFF;
              letter-spacing: 0;
              margin-bottom: 10px;
            }
            .cycle,.time,.education,.classNumber{
              font-family: 'PingFangSC-Regular';
              font-size: 16px;
              color: #fff;
              letter-spacing: 0;
              line-height: 23px;
            }
         }
      }
    }
    // 教学环境
    .teaching{
      width: 100%;
      background: #3D3D3D;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
     padding-bottom: 38px;
  
      .top{
        width: 100%;
        text-align: center;
        // width: fit-content;
        // margin: 0 auto;
        padding-top: 25px;
        margin-bottom: 13px;
        
        .title{
          font-family: 'PingFangSC-Regular';
          font-size: 16px;
          color: #F2F4F5;
          letter-spacing: 1.6px;
        }
         .line{
          width: 69.2px;
          height: 2px;
          margin: 3px auto;
          background: linear-gradient(-90deg,#C75FFF 0,#FF9696 100%);
        }
        .course{
          font-family: 'ArialMT';
          font-size: 12px;
          color: #9D9E9E;
          letter-spacing: 0;
        }
      }

      image{
        display: block;
        width: 248px;
        height: 462px;
      }
    }
    // 学员作品样式 works
    .works{
      width: 100%;
      background-color: #fff;
      .top{
        width: 100%;
        text-align: center;
        // width: fit-content;
        // margin: 0 auto;
        padding-top: 25px;
        margin-bottom: 13px;
        .title{
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #3D3D3D;
          letter-spacing: 1.6px;
        }
         .line{
          width: 69.2px;
          height: 2px;
          margin: 3px auto;
          background: linear-gradient(-90deg,#00A4FF 0,#31DBFF 100%);
        }
        .course{
          font-family: 'ArialMT';
          font-size: 12px;
          color: #9D9E9E;
          letter-spacing: 0;
        }
      }
      //轮播样式
      .swiper{
        width: 100%;
        height: 1860rpx;
        overflow: hidden;
        .item{
          width: 618rpx;
          height: 1812rpx !important;
          margin-left: 15px;
          image{
            // 906px
            display: block;
            width: 618rpx;
            height: 344rpx;
            margin-bottom: 9.2px;
          }
        }
      }
      // 轮播小点样式
      swiper.square-dot .wx-swiper-dot {
        background-color: #3683FF;
        opacity: 0.3;
        width: 10rpx;
        height: 10rpx;
        border-radius: 20rpx;
        margin: 0 8rpx !important;
    }
      swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active{
          opacity: 1;
          width: 30rpx;
          background-color: #3683FF;
      }
    }
    //学员就业样式
    .work{
      width: 100%;
      margin-top: 49px;
      .top{
        width: 100%;
        text-align: center;
        // width: fit-content;
        // margin: 0 auto;
        padding-top: 25px;
        margin-bottom: 13px;
        .title{
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #3D3D3D;
          letter-spacing: 1.6px;
        }
         .line{
          width: 69.2px;
          height: 2px;
          margin: 3px auto;
          background: linear-gradient(-90deg,#19EA3C 0,#3ADDFF 100% );
        }
        .course{
          font-family: 'ArialMT';
          font-size: 12px;
          color: #9D9E9E;
          letter-spacing: 0;
        }
      }
      .imgs{
        width: 100%;
        image{
          display: block;
          width: 100%;
          height: 280rpx;
          margin-bottom: 10px;
        }
      }
    }
    // 师资优势样式
    .teachers{
      width: 100%;
      .top{
        width: 100%;
        text-align: center;
        padding-top: 25px;
        margin-bottom: 13px;
        .title{
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #3D3D3D;
          letter-spacing: 1.6px;
        }
         .line{
          width: 69.2px;
          height: 2px;
          margin: 3px auto;
          background: linear-gradient(-90deg,#F05555 0,#F0BF3F 100%);
        }
        .course{
          font-family: 'ArialMT';
          font-size: 12px;
          color: #9D9E9E;
          letter-spacing: 0;
        }
      }
      //轮播样式
      .swiper{
        width: 100%;
        height: 680rpx;
        overflow: hidden;
        .item{
          width: 100%;
          height: 622rpx;
          image{
            display: block;
            width: 600rpx;
            height: 622rpx;
            margin-left: 30px;
          }
        }
      }
       // 轮播小点样式
       swiper.square-dot .wx-swiper-dot {
        background-color: #3683FF;
        opacity: 0.3;
        width: 30rpx;
        height: 5rpx;
        border-radius: 20rpx;
        margin: 0 8rpx !important;
    }
      swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active{
          opacity: 1;
          width: 30rpx;
          background-color: #3683FF;
      }
    }
    // 课程优势样式 
    .curriculum{
      margin: 10px auto 0;
      .top{
        width: 100%;
        text-align: center;
        padding-top: 25px;
        margin-bottom: 13px;
        .title{
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #3D3D3D;
          letter-spacing: 1.6px;
        }
         .line{
          width: 69.2px;
          height: 2px;
          margin: 3px auto;
          background: linear-gradient(-90deg,#00A4FF 0,#31DBFF 100%);
        }
        .course{
          font-family: 'ArialMT';
          font-size: 12px;
          color: #9D9E9E;
          letter-spacing: 0;
        }
      }
      .picture{
        image{
          display: block;
          width: 694rpx;
          height: 210rpx;
          margin-bottom: 10px;
        }
      }
    }
    // 联系我们样式
    .contact{
      margin-top: 21px;
      .top{
        width: 100%;
        text-align: center;
        padding-top: 25px;
        margin-bottom: 13px;
        .title{
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #3D3D3D;
          letter-spacing: 1.6px;
        }
         .line{
          width: 69.2px;
          height: 2px;
          margin: 3px auto;
          background: linear-gradient(-90deg,#C75FFF 0,#FF9696 100%);
        }
        .course{
          font-family: 'ArialMT';
          font-size: 12px;
          color: #9D9E9E;
          letter-spacing: 0;
        }
      }
      .content{
       padding-top: 20px;
        .info{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 29px;
          .left{
            width: 22px;
            height: 22px;
            margin-right: 6px;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .right{
            .address{
              font-family:' PingFangSC-Medium';
              font-size: 16px;
              color: #3D3D3D;
              letter-spacing: 0;
              font-weight:bold;
              margin-bottom: 3px;
            }
            .details{
              width: 596rpx;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #3D3D3D;
              letter-spacing: 0;
            }
          }
        }
      }
    }
    // 底部咨询按钮样式
    .bottom{
      margin-top: 33px;
      width: 100%;
      .left{
        float: left;
      }
      .right{
        width: 84rpx;
        float: right;
        margin-right: 20px;
        .consult{
          width: 100%;
          height: 84rpx;
          font-size: 12.8px;
          color: #FFFFFF;
          letter-spacing: 0;
          line-height: 84rpx;
          text-align: center;
          border-radius: 50%;
          background-image: linear-gradient(-145deg, #FC7441 2%, #FFBF2E 100%);
        }
        .top{
          margin-top: 15px;
          width: 100%;
          height: 52rpx;
          image{
            display: block;
            width: 100%;          
            height: 100%;
          }
        }
     }
    }

    // 头部导航栏弹窗

}